<template>
  <view class="select-picker">
    <view class="header">
      <view class="line"></view>
    </view>
    <view class="content">
      <view class="title2" v-if="title">{{ title }}</view>
      <view class="check-list">
        <view class="check-item" style="padding-left: 72rpx;">
          <view class="value" @click="handleCheckAllChange('before')">
            <view class="check-item-icon" :class="checkAllBefore ? 'checked' : ''"></view>
            <view class="check-item-content">全部前门</view>
          </view>
          <view class="value" @click="handleCheckAllChange('after')">
            <view class="check-item-icon" :class="checkAllAfter ? 'checked' : ''"></view>
            <view class="check-item-content">全部后门</view>
          </view>
        </view>
        <view class="check-item" v-for="(item, index) in list" :key="index">
          <view class="label">{{ item.label }}</view>
          <view class="value" @click="bindChange(item, index, '前')">
            <view class="check-item-icon" :class=" value.includes(item.value+'前') ? 'checked' : ''"></view>
            <view class="check-item-content">前门</view>
          </view>
          <view class="value" @click="bindChange(item, index, '后')">
            <view class="check-item-icon" :class=" value.includes(item.value+'后') ? 'checked' : ''"></view>
            <view class="check-item-content">后门</view>
          </view>
        </view>
      </view>
    </view>
    <view class="select-picker-bottom">
      <view class="select-picker-save" @click="handleSave">确定</view>
    </view>
  </view>
</template>

<script>
export default {
	props: {
		// 传入数组
		multiple: {
			type: Boolean,
			default: false
		},
		list: {
			type: Array
		},
		type: {
			type: Number,
			default: 1
		},
		keyVal: {
			type: String,
			default: 'brandName'
		},
		title: {
			type: [String, Array],
			default: []
		},
		active: {
			type: Array
		}
	},
	data() {
		return {
			value: this.active,
			checkAllBefore: false,
			checkAllAfter: false
		};
	},
	watch: {
		active(newValue) {
			this.value = newValue;
			this.checkAllBefore = this.value.filter(v=> !v.includes('后')).length === this.list.length;
			this.checkAllAfter = this.value.filter(v=> !v.includes('前')).length === this.list.length;
		}
	},
	computed: {},
	created() {
	},
	methods: {
		handleCheckAllChange(key) {
			if (key === 'before') {
				this.checkAllBefore = !this.checkAllBefore;
				if (this.checkAllBefore) {
					this.value = Array.from(new Set([...this.value, ...this.list.map(v=> `${v.value}前`)]));
				} else {
					this.value = this.value.filter(v=> !v.includes('前'));
				}
			} else {
				this.checkAllAfter = !this.checkAllAfter;
				if (this.checkAllAfter) {
					this.value = Array.from(new Set([...this.value, ...this.list.map(v=> `${v.value}后`)]));
				} else {
					this.value = this.value.filter(v=> !v.includes('后'));
				}
			}
			console.log(this.value,'handleCheckAllChange');
		},
		bindChange(item, index, key) {
			console.log(item, 'e的值');
			if (this.value.includes(item.value + key)) {
				this.value.splice(this.value.indexOf(item.value + key), 1);
			} else {
				this.value.push(item.value + key);
			}
			if (key === '前') {
				this.checkAllBefore = this.value.filter(v=> !v.includes('后')).length === this.list.length;
			} else {
				this.checkAllAfter = this.value.filter(v=> !v.includes('前')).length === this.list.length;
			}
			console.log(this.value,'bindChange');
			this.$emit('bindChange', item, index);
		},
		handleSave() {
			console.log('点击了保存');
			setTimeout(() => {
				this.$emit('close', this.value);
			}, 300);
		}
	}
};
</script>
<style lang="scss" scoped>
.select_item {
  display: flex;
  justify-content: center;
  align-items: center;
  // color: #0091ff;
  // padding-bottom: 30rpx;
}

.select-picker {
  background: #ffffff;
  border-radius: 8rpx 8rpx 0rpx 0rpx;
  box-shadow: 0rpx -4rpx 12rpx 0rpx rgba(0, 0, 0, 0.12);
  position: relative;
  z-index: 30;

  .header {
    border-radius: 8rpx 8rpx 0rpx 0rpx;
    height: 67rpx;
    display: flex;
    justify-content: center;
    align-items: center;
    //border-top: 2rpx solid #eeeeee;

    .line {
      width: 64rpx;
      height: 10rpx;
      opacity: 1;
      background: #d8d8d8;
      border-radius: 6rpx;
    }
  }

  .content {
    .title {
      display: flex;
      // flex: 1;
      width: 100%;

      .title-item {
        font-size: 32rpx;
        display: flex;
        flex: 1;
        justify-content: center;
        padding: 36rpx 0 30rpx 0;
        color: #333333;
        font-weight: 500;

        text {
          margin-left: 24rpx;
        }
      }
    }

    .title2 {
      font-weight: bold;
      color: #333333;
      font-size: 32rpx;
      padding: 20rpx 30rpx;
      border-bottom: 2rpx solid #eeeeee;
      margin-top: -40rpx;
    }
  }

  .select-picker-bottom {
    padding: 30rpx 40rpx;

    .select-picker-save {
      display: flex;
      color: #fff;
      font-weight: 500;
      height: 70rpx;
      background: #0091ff;
      border-radius: 8rpx;
      align-items: center;
      justify-content: center;
    }
  }
}

.check-list {
  display: flex;
  flex-direction: column;
  padding: 0 40rpx;
  max-height: 50vh;
  overflow: auto;

  .check-item {
    border-bottom: 2rpx solid #EEEEEE;
    display: flex;
    align-items: center;
    padding: 28rpx 0;
    color: #333333;

    &-icon {
      min-width: 32rpx;
      width: 32rpx;
      height: 32rpx;
      border-radius: 50%;
      background-color: #ffffff;
      border: 2rpx solid #cccccc;
      margin-right: 8rpx;
      font-size: 28rpx;
    }

    .checked {
      border: 1px solid transparent;
      background-image: url("https://erised-fresh.oss-cn-shenzhen.aliyuncs.com/%E4%B8%8B%E8%BD%BD.png");
      background-size: 32rpx 32rpx;
      background-repeat: no-repeat;
    }
    .label{
      padding-right: 20rpx;
      min-width: 52rpx;
      width: 52rpx;
    }
    .value{
      flex: 1;
      width: 0;
      display: flex;
      align-items: center;
    }
  }

  & > .check-item:nth-last-child(1) {
    border-bottom: 0;
  }
}
.check-item-all{
  display: flex;
  align-items: center;
  padding-left: 72rpx;
  .item{
    display: flex;
    align-items: center;
    flex: 1;
    width: 0;
    padding: 28rpx 0;
  }
}
</style>
